<template>
	<view class="login">
		<view>
			<navbar title='登录' :is-child="true" />
		</view>
		<view class="content">
			<!-- 头部logo -->
			<view class="header" style="background-color: #d6d6d6; width: 300rpx; height: 300rpx;">
				<image src="https://img2.imgtp.com/2024/04/01/Cd8a3lY3.png" style="width: 300rpx; height: 300rpx;"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput
					v-model="loginForm.username"
					type="text"
					maxlength="20"
					placeholder="用户名"
					:focus="isFocus"
				></wInput>
				<wInput
					v-model="loginForm.password"
					type="password"
					maxlength="20"
					placeholder="密码"
				></wInput>

				<wInput
					v-model="loginForm.captcha"
					type="number"
					maxlength="4"
					placeholder="验证码"
					:codeUrl="codeUrl"
					:captcha="true"
					@getCaptcha="getCode()"
				></wInput>
			</view>
			<wButton 
				class="wbutton"
				text="登 录"
				:rotate="isRotate" 
				@click="startLogin"
			></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">找回密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">注册账号</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import wInput from '@/components/watch-login/watch-input.vue' //input
	import wButton from '@/components/watch-login/watch-button.vue' //button
	
	import { getCaptcha, login, getLoginInfo } from '@/apis/user.js'
	import { mapMutations } from 'vuex'

	
	export default {
		data() {
			return {
				message: '',
				show: false,
				phoneData:'baage', //用户/电话
				passData:'', //密码
				isRotate: false, //是否加载旋转
				isFocus: true ,// 是否聚焦
				loginForm: {
					username: '',
					password: '',
					uuid: '',
					captcha: '',
				},
				codeUrl: String
			};
		},
		components:{
			wInput,
			wButton,
		},
		mounted() {
			_this= this;
		},
		methods: {
			...mapMutations(['setUserInfo', 'setToken']),
			getCode() {
			  getCaptcha().then(res => {
				  this.codeUrl = "data:image/gif;base64," + res.data.img;
				  this.loginForm.uuid = res.data.uuid;
			  });
			},
		    startLogin(e){
				//登录
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.loginForm.username.length  === 0) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '用户名不能为空'
				    });
				    return;
				}
				if (this.loginForm.password.length  === 0) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '密码不能为空'
				    });
				    return;
				}
				if (this.loginForm.captcha.length  === 0) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '验证码不能为空'
				    });
				    return;
				}
				_this.isRotate=true
				login(this.loginForm).then(res => {
					// 登录成功
					let token = res.data.token;
					_this.setToken(token);
					getLoginInfo().then(res => {
						// 获取登录信息
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '登录成功'
						});
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/me/me'
							})
						}, 1000);
						_this.setUserInfo(res.data)
					})

				}).catch(e => {
					if(e.code != undefined) {
						// 登录失败
						if(e.code === 5004) {
							uni.showToast({
								icon: 'error',
								position: 'bottom',
								title:  '用户名或密码错误'
							});
						} else {
							let message = e.message;
							uni.showToast({
								icon: 'error',
								position: 'bottom',
								title: message || '登录失败'
							});
						}
					}
				}).finally( r => {
					_this.isRotate=false;
				})
		    },
		},
		onLoad() {
			this.getCode();
		}
	}
</script>

<style>
	@import url("@/components/watch-login/css/icon.css");
	@import url("@/common/search.css");
</style>
